<template>
	<div class="login-wrapper pos">
		<uniNavBar background-color="#fff" left-icon="back" color="#000" :border="false" @clickLeft="returns">
		</uniNavBar>
		<view class="login-type">{{ $t(`page.users.register.loginType`) }}</view>
		<div class="tabs">
			<text v-for="(item, index) in tabList" :key="index" :class="{ active: active == index }"
				@click="tab(index)">
				{{ $t(`page.users.register.tabNav[${index}].name`) }}
			</text>
		</div>
		<div class="whiteBg">
			<div class="list" v-show="active == 0">
				<form @submit.prevent="submit">
					<div class="item">
						<div class="acea-row row-middle"><input type="text" class="texts"
								:placeholder="$t(`page.users.merchantLogin.placeEmail`)" v-model="email" /></div>
					</div>
					<div class="item">
						<div class="acea-row row-middle">
							<input type="password" class="texts password" maxlength="20"
								:placeholder="$t(`page.users.merchantLogin.placePasd`)" v-model="password" />
							<div class="forget"
								@click="goPage('/pages/users/user_pwd_edit/index?type=email&scene=forget')">
								{{ $t(`page.users.merchantLogin.forget`) }}
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="list" v-show="active == 1">
				<form @submit.prevent="submit">
					<div class="item">
						<div class="acea-row row-middle">
							<view class="acea-row row-middle pos_line" @click="selectCountry()">
								<image :src="countryFlag" class="flag"></image>
								<image src="../../../static/images/xiala.png" class="select_code"></image>
							</view>
							<text class="px-20">+{{ countryCode }}</text>
							<input type="number" class="texts" v-model="phone"
								:placeholder="$t(`page.users.merchantLogin.placePhone`)" style="margin:0" />
						</div>
					</div>
					<div class="item">
						<div class="acea-row row-middle">
							<input type="password" class="texts" maxlength="20"
								:placeholder="$t(`page.users.merchantLogin.placePasd`)" v-model="password" />
						</div>
					</div>
				</form>
			</div>
			<div class="footer">
				<div class="logon bg_color text-white" @click="submit">{{ $t(`page.users.merchantLogin.login`) }}</div>
			</div>
		</div>
		<tui-drawer mode="bottom" :visible="showList" @close="closeDrawer">
			<SortPickerList ref="sortPickerList" @clickData="clickData" @close="closeList"></SortPickerList>
		</tui-drawer>
	</div>
</template>
<script>
	import sendVerifyCode from '@/mixins/SendVerifyCode';
	import {
		loginEmail,
		loginFacebook,
		loginTwitter,
		loginGoogle,
		twitterToken,
		register,
		getUserInfo,
		registerVerify,
		mobileCaptcha,
		mobilePassword,
		loginMethodInfo,
		merchantLogin,
	} from '@/api/user';
	import facebookWebLogin from '@/plugin/facebookWebLogin.js';
	import GoogleSignInButton from '@/plugin/googleSign.js';
	import attrs, {
		required
	} from '@/utils/validate';
	import {
		Debounce
	} from '@/utils/validate.js';
	import SortPickerList from '@/components/sortPickerList/index.vue';
	const BACK_URL = 'login_back_url';
	let app = getApp();
	import {
		HTTP_REQUEST_URL,
		HEADER,
		TOKENNAME,
		HEADERPARAMS
	} from '@/config/app';
	import store from '@/store';
import { resolve } from 'path';
	export default {
		name: 'Login',
		mixins: [sendVerifyCode],
		data: function() {
			return {
				isAgree: false,
				tabList: ['Email', 'handphone'],
				email: '',
				password: '',
				phone: '',
				captcha: '',
				type: 'login',
				active: 0,
				showList: false,
				countryCode: '44',
				countryFlag: '../../../static/flag/gb.png',
				theme: app.globalData.theme,
				// clientId: '527732578974-i1v5q5h1tg3qj4hp3t96s1p4kjpvi9mf.apps.googleusercontent.com',
				loginInfo: {},
				isToLogin: undefined
			};
		},
		directives: {
			GoogleSignInButton
		},
		components: {
			SortPickerList
		},
		onReady() {
			var that = this;
			that.$refs['sortPickerList'].initPage();
		},
		onLoad(e) {
			uni.setStorageSync('countryCode', this.countryCode);
			this.isToLogin = e.isToLogin || undefined;
			let locale = (navigator.language || navigator.browserLanguage).toLowerCase();
		},
		methods: {
			userAgree() {
				uni.navigateTo({
					url: '/pages/users/user_agreement/index'
				});
			},
			tab(index) {
				this.active = index;
				this.password = '';
			},
			returns() {
				uni.navigateBack();
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			merchantLogin(data){
				const url = 'https:/api.adminwm.java.shopconch.com/api/admin/merchant/login';
				return new Promise((resolve, reject)=>{
					uni.request({
						url,
						method: 'POST',
						data: data || {},
						success: (res) => {
							resolve(res.data.data);
						},
						fail: (msg) => {
							console.error('【登录失败】', msg);
							reject(err);
						}
					})
				})
				
			},
			submit: Debounce(function() {
				let that = this;
				if (this.active === 0) {
					if (!that.email)
						return that.$util.Tips({
							title: this.$t(`message.login.emailEmpty`)
						});
					if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/i.test(that.email))
						return that.$util.Tips({
							title: this.$t(`message.login.correctEmail`)
						});
					if (!that.password)
						return that.$util.Tips({
							title: this.$t(`message.login.emptyPassword`)
						});
					uni.showLoading({
						title: this.$t(`message.login.loginLoading`)
					});
					this.merchantLogin({
						account: that.email,
						pwd: that.password
					})
					.then((data) => {
						uni.hideLoading();
						this.$store.commit('LOGIN', {
							token: data.token
						});
						uni.navigateTo({
							url: '/pages/user_merchant/index'
						})
					})
					.catch(e => {
						console.log('【e】',e);
						that.$util.Tips({
							title: e
						});
					});
				} else if (this.active === 1) {
					if (!that.phone)
						return that.$util.Tips({
							title: this.$t(`message.login.emptyPhone`)
						});
					if (!that.password)
						return that.$util.Tips({
							title: this.$t(`message.login.emptyPassword`)
						});
					uni.showLoading({
						title: this.$t(`message.login.loginLoading`)
					});
					this.merchantLogin({
						account: that.phone,
						pwd: that.password
					})
					.then((data) => {
						this.$store.commit('LOGIN', {
							token: data.token
						});
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/user_merchant/index'
						})
					})
					.catch(e => {
						that.$util.Tips({
							title: e
						});
					});
				}
			}),
			selectCountry() {
				this.showList = true;
			},
			clickData(data) {
				this.countryCode = data.value;
				uni.setStorageSync('countryCode', data.value);
				this.countryFlag = data.flag;
				this.showList = false;
			},
			closeList() {
				this.showList = false;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.protocol {
		margin: 30rpx 0;
		// padding-left: 82rpx;
	}

	.protocol_text {
		.font_pro {
			color: rgb(110, 131, 189);
			// @include main_color(theme);
		}
	}

	.main_color {
		@include main_color(theme);
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.text-white {
		color: #fff;
	}

	.text-333 {
		color: #333;
	}

	.border {
		border: 1px solid #DDDDDD;
	}

	.acea-row.row-middle {
		input {
			margin-left: 20rpx;
			display: block;
		}
	}

	.px-20 {
		padding: 0 20rpx 0;
	}

	.flag {
		width: 40rpx;
		height: 26rpx;
		display: inline-block;
		margin-left: 26rpx;
	}

	.select_code {
		width: 16px;
		height: 8px;
		display: inline-block;
		margin-left: 16rpx;
	}

	.pos_line {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1px;
			height: 28rpx;
			background-color: #eee;
		}
	}

	.anonymous {
		font-size: 24rpx;
		margin-top: 32rpx;
		color: #666;
	}

	.login-wrapper {
		// padding: 30rpx;
		height: 100vh;
		background: #fff;

		// display: flex;
		// align-items: flex-start;
		// justify-content: center;
		// flex-wrap: wrap;
		.login-type {
			width: 100%;
			padding-left: 30rpx;
			font-size: 60rpx;
			color: rgb(20, 20, 20);
			margin-top: 60rpx;
		}

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333;
			border-bottom: 4rpx solid rgb(238, 238, 238);
			padding-bottom: 40rpx;
			margin-top: 60rpx;

			.active {
				@include main_color(theme);

				position: relative::after {
					content: '';
					position: absolute;
					width: 80rrpx;
					height: 4rpx;
					@include main_bg_color(theme);
					bottom: -40rpx;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}

		.whiteBg {
			// margin-top: 100rpx;
			width: 90%;
			margin: 50rpx auto 0;

			.list {
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				// padding: 0 60rpx 0;

				.item {
					border-bottom: 1px solid #F0F0F0;
					background: #fff;

					.iconfont {
						font-size: 30rpx;
						color: #B4B4B4;
					}

					.row-middle {
						position: relative;
						padding: 16rpx 0rpx;

						.texts {
							flex: 1;
							font-size: 28rpx;
							height: 80rpx;
							line-height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.password {}

						input {
							position: relative;
							flex: 1;
							font-size: 28rpx;
							height: 80rpx;
							line-height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-left: 0;
							width: 100%;


						}

						.forget {
							position: absolute;
							right: 0;
							color: rgb(74, 108, 203);
						}

						.code {
							position: absolute;
							right: 30rpx;
							top: 50%;
							color: $theme-color;
							font-size: 26rpx;
							transform: translateY(-50%);
						}

						.Resend {
							height: 48rpx;
							padding: 0 24rpx 0;
							line-height: 40rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							border-radius: 24rpx;
							@include main_color(theme);
							@include coupons_border_color(theme)
						}
					}
				}

				.forget {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					// margin-top: 24rpx;
					text-align: right;
				}
			}

			.tips {
				margin-top: 150rpx;
				text-align: center;

				.tip {
					font-size: 30rpx;
				}

				.tip-btn {
					margin-top: 10rpx;
					font-size: 40rpx;
					color: rgb(110, 131, 189);
				}
			}

			.footer {
				// position: fixed;
				bottom: 100rpx;
				width: 100%;
				margin-top: 100rpx;

				// left: 0;
				// right: 0;
				.protocol {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.logon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 546rpx;
				height: 86rpx;
				margin: auto;
				border-radius: 10rpx;
				font-size: 30rpx;
			}

			// .tips {
			// 	margin: 30rpx;
			// 	text-align: center;
			// 	color: #999;
			// }
		}

		.bottom {
			text-align: center;
			margin-top: 104rpx;
			margin-bottom: 80rpx;

			.sign_type {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B4B4B4;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: 16rpx;
					left: -80rpx;
					width: 68rpx;
					height: 1px;
					background: #ccc;
					opacity: .5;
				}

				&::after {
					content: '';
					position: absolute;
					top: 16rpx;
					right: -80rpx;
					width: 68rpx;
					height: 1px;
					background: #ccc;
					opacity: .5;
				}
			}

			.sign_type_list {
				width: 284rpx;
				margin: auto;
				display: flex;
				justify-content: space-around;
				padding-top: 40rpx;

				image {
					width: 68rpx;
					height: 68rpx;
				}
			}

		}
	}

	.pos {
		position: relative;

		&-cb {
			position: absolute;
			left: 50%;
			bottom: 200rpx;
			transform: translateX(-50%);
		}
	}
</style>